<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<c:set var="title" value="酒店详情" scope="request" />
<jsp:include page="/head.jsp" />
</head>
<body>
	<c:import url="/news-class.do?mb=header" />
	
	<!-- 路径导航栏 -->
	<ol class="breadcrumb">
      <li><a href="#">七八网</a></li>
      <li><a href="/hotel.html">酒店预订</a></li>
      <li class="active">${list4.shopName }</li>
    </ol>
	<!-- 搜索栏 -->
	<nav style="text-align: center;" class="hotelnav navbar">
      <h4>${list4.shopName }欢迎您的到来</h4>
    </nav>
    
    
	<div class="hotel-info-body">
	
    <!--导航条 -->
		<div class="info-1 info-body">
			<ul class="nav nav-pills nav-justified" style="background-color: white;  ">
		      <li role="presentation" class="active"><a>酒店详情</a></li>
		      <li role="presentation"><a>房型选择</a></li>
		      <li role="presentation"><a>酒店评价</a></li>
	   		</ul>
		</div>
		<!-- 滚动菜单js控制 -->
		<script>
			window.onload=function(){ 
		    	var list = document.querySelectorAll(".info-1>ul>li");
		  		  for (var i = 0; i < list.length; i++) { 
	  			        let id = ("maue"+(i+1));
		  		        list[i].onclick = function () {
		  		    		maueActive(list,id);
		  		    		document.getElementById(id).scrollIntoView();
		  				}
		  		  } 
		  	}
			function maueActive(a,i){
	  			if(i=='maue1'){
			  		a[0].setAttribute('class','active');
			  		a[1].removeAttribute('class');
			  		a[2].removeAttribute('class');
		  		}if(i=='maue2'){
			  		a[1].setAttribute('class','active');
			  		a[0].removeAttribute('class');
			  		a[2].removeAttribute('class');
		  		}if(i=='maue3'){
			  		a[2].setAttribute('class','active');
			  		a[1].removeAttribute('class');
			  		a[0].removeAttribute('class');
		  		}
		  	}
	        function updateNav() { 
		    	var list = document.querySelectorAll(".info-1>ul>li");
	            var scop = document.documentElement.scrollTop;
		        	let list1 = document.querySelectorAll(".panel-heading>h3");
		  		      let h1 = list1[0].offsetTop;
		  		      let h2 = list1[1].offsetTop;
		  		      let h3 = list1[2].offsetTop;
	                if (scop > 150) {
	                    document.getElementsByClassName('info-1')[0].setAttribute('style','position: absolute; top:'+(scop-147)+'px;');
	                   	if(scop>h1&&scop<h2){
		  		    		maueActive(list,'maue1');
		                   	}else if(scop>h2&&scop<h3){
		  		    		maueActive(list,'maue2');
		                   	}else if(scop>h3){
		  		    		maueActive(list,'maue3');
		                   	}
	                }else if(scop <= 150){
	                    document.getElementsByClassName('info-1')[0].removeAttribute('style');
	                }
	        }
	        window.addEventListener('scroll', updateNav);
    	</script>
    <!--酒店详情  -->
		<div class="info-2 info-body">
			<div class="info-2-1 panel panel-default">
		      <div class="panel-heading">
		        <h3 id="maue1" class="panel-title">酒店详情</h3>
		      </div>
		      <div class="panel-body">
		      <p>图片展示</p>
		      	<div class="info-2-imgs">
		      	<c:forEach items="${list4.img }" var="img">
		      		<img src="${img }">
		      	</c:forEach>
		      	<c:forEach items="${list5 }" var="img">
		      		<img src="${img.roomImgs }">
		      	</c:forEach>
		      		<div style="clear: both;">
		      		</div>
		      	</div>                      
		      	<div style="  display: inline-block;width:23%;height:250px; float: right; ">
	      				<p>地图位置</p>
			      		<div class="_gis" id="gis" style="border:1px black solid; width: 100%; height: 100%; z-index: 999;">
							<iframe name="gis" style="width: 100%; height: 100%;" frameborder="0" src="${src }"></iframe>
						</div>
		      		</div>
		      	<div class="info-2-p">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
		      		<p>
		      			<span style="width: 30px; display:inline-block;"></span>
		      			${list4.shopMemo }
		      		</p>
		      	</div>
		      	<script type="text/javascript">
			      	$(function(){
			      		$('.info-2-imgs').children(":first").attr("style","width:280px;");
			      	});
		      	</script>
		      </div>
		    </div>
		</div>
    <!--房型选择-->
		<div class="info-3 info-body">
			<div class="panel panel-default">
		      <div class="panel-heading">
		        <h3 id="maue2" class="panel-title">房型选择</h3>
		      </div>
		      
		      <div class="panel-body">     
				
				<c:forEach items="${list5 }" var="list">
		      	<div class="roomshow-lan">
					<div class="modal fade bs-example-modal-fx${list.roomId }" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none; z-index:1041;">
						<div class="modal-dialog modal-lg" role="document">
							<div class="modal-content">
								<img data-src="holder.js/100%x180" alt="100%x180" style="height: 100%; width: 100%; display: block;" src="${list.roomImgs }" data-holder-rendered="true">
							</div>
						</div>
					</div>
				    <div class="thumbnail">
				    	<a style="padding:none; background-image: linear-gradient(white, white, white); border-color:white;" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-fx${list.roomId }">
				        	<img data-src="holder.js/100%x200" alt="100%x200" src="${list.roomImgs }" data-holder-rendered="true" style="height: 140px; width:140px; background-color:white; display: block;">
				        </a>
				     	<div class="caption">
				            <h3>${list.roomTypeName }</h3>
				            <p>${list.roomIntroduce }</p>
				            <p><a href="hotel-order.html?roomTypeId=${list.roomTypeId }&id=${list.shopId}" style="margin-left:20px; float: right;" class="btn btn-primary" role="button">预定房间</a> </p>
				           	<span style=" float: right;">￥<s>${list.roomMarketPrice }</s></span>
				           	<br>	
				           	<span style="font-size:18px;float: right;">￥${list.roomPlatformPrice }</span>
				        </div>
				    </div>
				</div>
				</c:forEach>
		      </div>
		    </div>
		</div>
    <!--酒店评价 -->
		<div class="info-4 info-body">
			
			<div class="panel panel-default">
		      <div class="panel-heading">
		        <h3 id="maue3" class="panel-title">酒店评价</h3>
		      </div>
		      <div  class="panel-body">
		      <c:if test="${flag}">
				 <c:forEach items="${list6}" var="comment">
				    <div class="panel panel-default">
				      <div class="panel-heading">
				        <h3 class="panel-title">${comment.usrName }:</h3>
				        <h3 style="float: right;">${comment.roomName }</h3>
				      	<h5 >
				      	入住时间:<fmt:formatDate value="${comment.inTime }" pattern="yyyy/MM/dd"/>
				      	</h5>
				      </div>
				      <div class="panel-body">
				      	<p style="clear:left;clear:right;">
				      	${comment.commentContent }
				      	</p>
				      	<p style="float: left;">
				      	评论时间:<fmt:formatDate value="${comment.commentTime }" pattern="yyyy/MM/dd"/>
				      	</p>
				      	<!-- <a style="padding:none; background-image: linear-gradient(white, white, white); border-color:white;" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-fx">
				        	<img data-src="holder.js/100%x200" alt="100%x200" src="img/_noimg.png" data-holder-rendered="true" style="height: 140px; width:140px; background-color:white; display: block;">
				        </a>
				        <div class="modal fade bs-example-modal-fx" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none; z-index:1041;">
							<div class="modal-dialog modal-lg" role="document">
								<div class="modal-content">
									<img data-src="holder.js/100%x180" alt="100%x180" style="height: 100%; width: 100%; display: block;" src="img/_noimg.png" data-holder-rendered="true">
								</div>
							</div>
						</div> -->
				       </div>
				    </div>
				</c:forEach>
		     </c:if>
		      <c:if test="${not flag}">
		      	<div style="text-align: center;">
		      		<h3>很抱歉，当前酒店暂无评价</h3>
		      	</div>
		     </c:if>
		     
		</div>
	</div>
	<script type="text/javascript" src="shops-map.js"></script>
	<jsp:include page="/footer.jsp"/>
</body>
</html>
